Carousel Guidelines 輪播指導規則
- 輪播元件可以顯示不同大小的專案，適用於內容瀏覽、精選推薦和多媒體展示。
- 專案大小可以動態變化，以提供更好的視覺層次感。
- 輪播可以包含影象、文字和互動控制元件，如按鈕、評分等。
- 不同的佈局適用於不同場景，應根據使用需求選擇合適的型別。
Usage 使用說明
輪播專案必須在螢幕上完全可見（無邊界佈局除外）。滾動時，專案會自動調整大小並對齊到正確位置，以保持一致的佈局結構。
輪播可以用兩種方式滑動：
- 自由滑動：像正常滾動頁面一樣，可以在任何地方停下。這種方式最適合無邊界的輪播。
- 自動對齊：滑動後內容會自動對準固定位置，適合多瀏覽、主要展示和全屏的輪播。
佈局型別及適用場景（Layout Types & Best Use Cases）
| 佈局型別（Layout） | 適用於（Best used for） |
| 多瀏覽（Multi-browse） | 瀏覽多種內容（如推薦內容、類別、播放列表） |
| 無邊界（Uncontained） | 高度沉浸式體驗（適用於新聞、短影片、社交動態） |
| 主視覺（Hero） | 突出重點內容（適用於大型圖片、主要資訊展示） |
| 居中主視覺（Center-aligned hero） | 突出主內容（適用於精選推薦、專題內容） |
| 全屏（Full-screen） | 完整聚焦單個大尺寸專案（適用於影片、廣告、全屏故事） |
Accessibility requirements on scrolling pages滾動頁面的可訪問性要求
- 輪播圖應提供簡單方式檢視所有內容，無需橫向滑動（全屏模式除外）。
- 在下方新增"顯示全部"按鈕，點選後在新頁面垂直展示所有專案。
- 帶標題的輪播圖可新增方向箭頭。更多無障礙設計方案，請檢視無障礙說明。。
Multi-browse 多瀏覽
- 多瀏覽佈局適用於圖片和內容展示，如相簿和列表。專案要清晰統一，方便快速滑動檢視。
- 螢幕尺寸越大，可顯示的內容專案越多。
- 避免過多文字和複雜圖片，以保持良好瀏覽體驗。
Uncontained 無限制
- 無邊界佈局允許內容大小一致，橫向滑動顯示。
- 支援自由滑動和自動對齊兩種方式。
- 內容大小固定，便於新增文字說明和介面元素。
Hero 主視覺模式
適用於突出單個主要內容，如頭條新聞、活動推廣等。支援額外的小專案，為主內容提供補充資訊。
Center-aligned hero 居中主視覺模式
該佈局確保主要內容居中對齊，增強視覺焦點。適用於精選推薦、專題展示等需要均衡佈局的場景。
Full-screen 全屏
適用於沉浸式體驗，如全屏廣告、故事模式、影片播放等。僅顯示一個大尺寸專案，不會同時展示多個專案。
Anatomy 結構
Container 容器
輪播的容器用於容納所有專案，並定義滾動區域的範圍。容器可以適應不同尺寸，以便在各種螢幕上保持良好的使用者體驗。
Carousel items 輪播項
輪播專案沒有固定寬度，其寬度會根據視窗大小或其在輪播佈局中的位置進行調整。
Item text (optional) 專案文字（可選）
輪播主要展示圖片等視覺內容。如果需要新增文字，建議保持簡短。如果確實需要展示較多文字，建議選擇無邊界佈局（可以容納更多內容），或者換用卡片形式展示。
輪播內容會自動適應不同的螢幕大小。無論顯示尺寸如何，文字都要保持清晰易讀。當輪播項變小時，建議使用更簡短的文字描述。
Responsive layout 響應式佈局
視窗大小決定可見專案數量。小視窗最多顯示3個專案，大視窗自動顯示並調整更多專案。全屏模式僅顯示1個專案。
Behavior 行為
Scrolling 滾動
輪播時會產生平滑的滑動效果。有兩種滾動方式：輪播有兩種不同的滾動方式：
- 無約束佈局：可以隨意滑動並在任何位置停下。
- 其他佈局（多瀏覽、主視覺和全屏）：滑動後會自動對齊到特定位置。全屏佈局時，內容會自動對齊到螢幕邊緣。
吸附滾動（Snap-Scrolling）
吸附滾動 讓輪播專案在滾動後自動對齊到網格佈局，並固定在正確的位置。
- 多瀏覽佈局（Multi-browse）
- 英雄佈局（Hero）
- 全屏輪播（Full-screen Carousels）
Requirements on scrolling pages頁面滾動要求
為了照顧所有使用者，輪播內容需要提供簡單的檢視方式。使用者應該能在不使用水平滑動的情況下，檢視所有內容（全屏輪播除外）。最簡單的解決方案是：在輪播下方放置一個"顯示全部"按鈕，點選後可以在新頁面上垂直排列顯示所有內容。
如果輪播圖有標題，你可以改用箭頭圖示按鈕。將箭頭圖示直接放在標題旁邊或同一行。確保所有輪播圖專案的頁面上也顯示標題。
儘量使用標準的無障礙設計方案。如果確實需要其他方案，可以：在導航欄上新增"顯示全部"按鈕。在輪播圖外圍新增控制按鈕。注意：不要在輪播圖內部放置箭頭等控制元素。
Interaction & style 互動與樣式
Touch 觸控
Cursor 游標，懸停，點選